<template>
  <div class="file_grid_wrapper">
    <ul class="file_list" v-loading="loading" element-loading-text="文件加载中..." @scroll="handleScroll">
      <li class="file_item"
          v-for="(item,index) in dataList"
          :key="index"
          :class="item.checked?'checked':''"
          :title="item.name"
      >
        <div @click="fileClick(item)">
          <div v-if="item.fileType===3" class="videoContent">
            <img class="video_img" src="@/assets/images/video_img.png" alt="加载失败">
            <video-review class="video_box" :ref="`videoReview-${index}`" :videoSrc="item.url"></video-review>
          </div>
          <div v-else style="width: 60px; height: 60px;margin: auto">
            <img src="@/assets/image_library/dirlarge.png" v-if="item.isDir===1" :style="`height:60px; width:60px;`"/>
            <el-image
              class="file-img"
              :src="item.url"
              :style="`height:60px; width:60px;`"
              fit="cover"
              v-else-if="item.fileType==4"
            />
            <el-image
              class="file-img"
              :src="FileImage[item.extendName]?FileImage[item.extendName]:require('@/assets/image_library/neticon.png')"
              :style="`height:50px; width:50px`"
              fit="cover"
              v-if="item.fileType!=4&&item.fileType!=3&&item.isDir!=1"
            />
          </div>

        </div>
        <!--        <div class="file-name" v-html="item.fileName">{{ `${item.fileName}.${item.extendName}` }}</div>-->
        <div
          v-if="!item.isDir"
          class="file-name"
        >{{ item.fileName }}.{{ item.extendName }}
        </div>
        <div
          v-if="item.isDir"
          class="file-name"
        >{{ item.fileName }}
        </div>
        <div
          v-if="item.isDir!==1"
          :class="item.checked?'file-checked-wrapper checked':'file-checked-wrapper'"
        >
          <div class="item_top" @click.stop>
            <el-checkbox
              class="file-checked"
              v-model="item.checked"
              @change="checkChange"
            />
          </div>
        </div>
      </li>
    </ul>
  </div>
</template>

<script>
import videoReview from '@/views/library_homePage/component/videoReview.vue'
import { mapMutations } from 'vuex'

export default {
  name: 'libraryList',
  components: { videoReview },
  model: {
    prop: 'value',
    event: 'update:value'
  },
  props: {
    value: {
      type: Boolean,
      default: false
    },
    dataList: Array
  },
  watch: {
    value: {
      handler(val) {
        this.checkAllChange(val)
      }
    }
  },
  data() {
    return {
      loading: false,
      FileImage: {
        'pdf': require('@/assets/image_library/pdficon.png'),
        'docx': require('@/assets/image_library/wordIcon.png'),
        'dov': require('@/assets/image_library/wordIcon.png'),
        'xls': require('@/assets/image_library/excelicon.png'),
        'xlsx': require('@/assets/image_library/excelicon.png'),
        'ppt': require('@/assets/image_library/ppticon.png'),
        'pptx': require('@/assets/image_library/ppticon.png'),
        'txt': require('@/assets/image_library/texticon.png'),
        'zip': require('@/assets/image_library/zipicon.png'),
        'rar': require('@/assets/image_library/zipicon.png'),
        'mp3': require('@/assets/image_library/musicicon.png')
      }
    }
  },
  mounted() {
  },
  computed: {
    isCheckAll() {
      return this.dataList.filter(item => item.checked).length === this.dataList.length
    }
  },
  methods: {
    ...mapMutations('libraryFile', ['removePath', 'clearPathArr', 'addPath']),
    handleScroll(event) {
      const { scrollTop, clientHeight, scrollHeight } = event.target
      if (scrollTop + clientHeight >= scrollHeight) {
        // 滚动条到达底部，触发懒加载
        this.loadMoreData()
      }
    },
    loadMoreData() {
      this.$emit('lookMore')
    },
    /**
     * 文件点击事件
     * @param item
     */
    fileClick(item) {
      if (item.isDir === 1) {
        this.$emit('fileClick', item.id)
        this.addPath(item)
      }
    },
    // 全选
    checkAllChange(val) {
      this.dataList.forEach(item => {
        if (item.isDir !== 1) {
          item.checked = val
        }
      })
      this.$emit('checklist', { arr: this.dataList.filter(item => item.checked) })
    },
    // 选中change事件
    checkChange() {
      this.$emit('checklist', { arr: this.dataList.filter(item => item.checked) })
      if (this.isCheckAll) {
        this.$emit('update:value', true)
      } else if (this.dataList.filter(item => item.checked).length === 0) {
        this.$emit('update:value', false)
      }
    }
  }
}
</script>

<style scoped lang="scss">
.file_grid_wrapper {
  height: 100%;

  .file_list {
    height: 100%;
    overflow-y: auto;
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    align-content: flex-start;
    list-style: none;

    .file_item {
      width: 110px;
      height: 110px;
      margin: 0 12px 12px 0;
      position: relative;
      padding: 22px 8px 4px 8px;
      box-sizing: border-box;
      text-align: center;
      cursor: pointer;
      z-index: 1;
      border-radius: 5px;

      .videoContent {
        position: relative;
        height: 60px;
        width: 60px;
        left: 50%;
        transform: translateX(-50%);

        .video_img {
          width: 12px;
          height: 12px;
          object-fit: cover;
          position: absolute;
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%);
        }

        .video_box {
          width: 100%;
          height: 100%;
          display: flex;
          justify-content: center;
          align-items: center;
          background: #f5f5f5;
          border-radius: 4px;
          cursor: pointer;

        }
      }

      &:hover {
        background: rgba(245, 247, 250, 0.5);

        .file-checked-wrapper {
          position: absolute;
          z-index: -1;
          display: block;
        }
      }

      .file-name {
        height: 22px;
        font-size: 12px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }

      .file-checked-wrapper {
        position: absolute;
        top: 0;
        left: 0;
        z-index: 2;
        width: 100%;
        height: 100%;
        display: none;

        .item_top {
          display: flex;
          position: absolute;
          top: 5px;
          left: 0;
          padding: 0 5px;
          box-sizing: border-box;
          width: 100%;
          align-items: center;
          justify-content: space-between;
        }

      }

      .file-checked-wrapper.checked {
        display: block;
      }
    }

    .file_item:nth-child(4n) {
      margin-right: 0;
    }

    .file_item.checked {
      background-color: #e3f3ee;
    }
  }
}
</style>
